<!DOCTYPE html>
<html lang="en">
<head>
  <title>Install Lsky Pro</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdui/0.4.1/css/mdui.min.css" rel="stylesheet">
</head>
<body class="mdui-theme-accent-indigo">
<style>
  main {
    margin: 5rem auto;
    max-width: 500px;
    border-radius: 3px;
    padding: 1rem;
  }
  table {
    width: 100%;
  }
  tr {
    display: table;
    width: 100%;
    border: 1px solid #ebebeb;
  }
  td {
    width: 50%;
    margin-bottom: .8rem;
  }
</style>
<div class="mdui-container">
  <main class="mdui-shadow-2">
    {switch step}

    {case 1}
    <h4>- 运行环境检测</h4>
    <table>
      <tbody>
      <tr>
        <td align="right">
          PHP版本 &ge; 5.6：
        </td>
        <td align="left">
          {if ($phpVerGt56) }
          <i class="mdui-icon material-icons mdui-text-color-green">&#xe86c;</i>
          {else/}
          <i class="mdui-icon material-icons mdui-text-color-red">&#xe5c9;</i>
          {/if}
        </td>
      </tr>
      <tr>
        <td align="right">
          fileInfo拓展：
        </td>
        <td align="left">
          {if ($isFileInfo) }
          <i class="mdui-icon material-icons mdui-text-color-green">&#xe86c;</i>
          {else/}
          <i class="mdui-icon material-icons mdui-text-color-red">&#xe5c9;</i>
          {/if}
        </td>
      </tr>
      <tr>
        <td align="right">
          curl拓展：
        </td>
        <td align="left">
          {if ($isCurl) }
          <i class="mdui-icon material-icons mdui-text-color-green">&#xe86c;</i>
          {else/}
          <i class="mdui-icon material-icons mdui-text-color-red">&#xe5c9;</i>
          {/if}
        </td>
      </tr>
      <tr>
        <td align="right">
          mysqli：
        </td>
        <td align="left">
          {if ($isMysqli) }
          <i class="mdui-icon material-icons mdui-text-color-green">&#xe86c;</i>
          {else/}
          <i class="mdui-icon material-icons mdui-text-color-red">&#xe5c9;</i>
          {/if}
        </td>
      </tr>
      <tr>
        <td align="right">
          文件写入权限：
        </td>
        <td align="left">
          {if ($dir) }
          <i class="mdui-icon material-icons mdui-text-color-green">&#xe86c;</i>
          {else/}
          <i class="mdui-icon material-icons mdui-text-color-red">&#xe5c9;</i>
          {/if}
        </td>
      </tr>
      </tbody>
    </table>
    {if (!$testing) }
    <a href="javascript:void(0)" class="mdui-btn mdui-btn-block mdui-m-t-1 mdui-color-teal mdui-ripple" disabled>检测不通过</a>
    {else/}
    <a href="{:url('install/index', ['step' => 2])}" class="mdui-btn mdui-btn-block mdui-m-t-1 mdui-color-teal mdui-ripple">下一步</a>
    {/if}
    {/case}

    {case 2}
    <h4>- 完善数据库配置</h4>
    <form action="" method="post" id="configure-mysql-form">
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库连接地址</label>
        <input class="mdui-textfield-input" type="text" name="hostname" placeholder="数据库连接地址" value="127.0.0.1" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库名</label>
        <input class="mdui-textfield-input" type="text" name="database" placeholder="数据库名称" value="lsky" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库用户名</label>
        <input class="mdui-textfield-input" type="text" name="username" placeholder="数据库用户名" value="root" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库密码</label>
        <input class="mdui-textfield-input" type="password" name="password" placeholder="数据库密码" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库连接端口</label>
        <input class="mdui-textfield-input" type="number" name="hostport" placeholder="数据库连接端口" value="3306" autocomplete="off"/>
      </div>
      <button class="mdui-btn mdui-btn-block mdui-m-t-1 mdui-color-teal mdui-ripple">配置数据库</button>
    </form>
    {/case}

    {case 3}
    <h4>- 设置管理员账号</h4>
    <form action="" method="post" id="configure-admin-form">
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">管理员邮箱</label>
        <input class="mdui-textfield-input" type="email" name="email" placeholder="管理员邮箱" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">管理员用户名</label>
        <input class="mdui-textfield-input" type="text" name="username" placeholder="管理员用户名" value="admin" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">管理员密码</label>
        <input class="mdui-textfield-input" type="password" name="password" placeholder="管理员密码" autocomplete="off"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">确认管理员密码</label>
        <input class="mdui-textfield-input" type="password" name="password_confirm" placeholder="确认管理员密码" autocomplete="off"/>
      </div>
      <button class="mdui-btn mdui-btn-block mdui-m-t-1 mdui-color-teal mdui-ripple">设置管理员账号</button>
    </form>
    {/case}

    {case 4}
    <h4>- 安装成功</h4>
    <div class="mdui-text-center">
      <p>程序安装成功，请牢记管理员账号密码！</p>
      <a href="{:url('/')}" class="mdui-btn mdui-btn-block mdui-m-t-1 mdui-color-teal mdui-ripple">网站首页</a>
      <a href="https://www.wispx.cn" class="mdui-btn mdui-btn-block mdui-m-t-1 mdui-color-pink mdui-ripple">作者博客</a>
    </div>
    <div class="mdui-m-t-2 mdui-text-color-grey">Copyright &copy; 2018 - present Wisp X All rights reserved.</div>
    {/case}

    {default /}

    {/switch}
  </main>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/0.4.1/js/mdui.min.js"></script>
<script>
  $(function () {
    $('#configure-mysql-form').submit(function (e) {
      e.preventDefault();
      $.ajax({
        url: "{:url('install/index', ['step' => 2])}",
        data: $(this).serialize(),
        type: 'POST',
        dataType: 'JSON',
        beforeSend: function () {
        },
        success: function (response) {
          if (response.code) {
            location.href = "{:url('install/index',['step' => 3])}";
          } else {
            mdui.snackbar({
              message: response.msg,
              position: 'right-top'
            });
          }
        },
        error: function () {
        },
        complete: function () {

        }
      });
    });
    $('#configure-admin-form').submit(function (e) {
      e.preventDefault();
      $.ajax({
        url: "{:url('install/index', ['step' => 3])}",
        data: $(this).serialize(),
        type: 'POST',
        dataType: 'JSON',
        beforeSend: function () {
        },
        success: function (response) {
          if (response.code) {
            location.href = "{:url('install/index', ['step' => 4])}";
          } else {
            mdui.snackbar({
              message: response.msg,
              position: 'right-top'
            });
          }
        },
        error: function () {
        },
        complete: function () {

        }
      });
    });
  });
</script>
</html>
